import React, { useEffect, useState } from 'react';
import { Table, Input, Switch, Button } from 'antd';

const About = () => {
  const columns = [
    {
      title: '接口名称',
      dataIndex: 'apiName',
      key: 'name',
      render: (text) => <a>{text || '暂未配置'}</a>,
    },
    {
      title: '是否对接',
      key: 'action',
      render: (_, record) => {
        return <Switch onChange={(checked)=>onChangeSwitch(checked,record)} />;
      },
    },
    {
      title: '接口地址(测试环境)',
      dataIndex: 'proSit',
      key: 'proSit',
      render: (text, record) => {
        console.log(record);
        return record.access ? <Input /> : <span>{text}</span>;
      },
    },
    {
      title: '接口地址 (生产环境)',
      dataIndex: 'proPro',
      key: 'proPro',
      render: (text, record) => {
        return record.access ? <Input /> : <span>{text}</span>;
      },
    },
  ];
  const [tableData, setTableData] = useState([
    {
      key: '1',
      apiName: '订单信息同步',
      proSit: 32,
      proPro: 'New York No. 1 Lake Park',
    },
    {
      key: '2',
      apiName: '司机实时位置推送',
      proSit: 42,
      proPro: 'London No. 1 Lake Park',
    },
    {
      key: '3',
      apiName: '支付状态同步',
      proSit: 32,
      proPro: 'arwaad. 1 Lake Park',
    },
  ]);

  let onChangeSwitch = (checked,record) => {
    let currentData = [];
    tableData.forEach((f) => {
      if (f.key === record.key) {
        // console.log(f,record);
        currentData.push({ ...f, access: checked });
      } else {
        currentData.push(f);
      }
    });
    setTableData(currentData);
  };

  useEffect(() => {}, []);
  return (
    <div>
      <h2>About</h2>
      <Table columns={columns} dataSource={tableData} />
    </div>
  );
};
export default About;
